t<template>
	<view>
		<view class="u-padding-30">
			<u-form :model="userinfo" ref="uForm">
				<u-form-item label-width='200' label="真实姓名">
					<u-input v-model="userinfo.user_name" placeholder="请输入真实姓名"/>
				</u-form-item>
				<u-form-item label-width='200' label="手机号码">
					<u-input v-model="userinfo.phone" placeholder="请输入手机号码"/>
				</u-form-item>
				<u-form-item label-width='200' label="身份证号">
					<u-input v-model="userinfo.card" placeholder="请输入身份证号"/>
				</u-form-item>
				<u-form-item label-width='200' label="住址">
					<u-input v-model="userinfo.address" placeholder="请输入住址"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="viparticle_button u-padding-right-30 u-padding-left-30 u-flex ">
			<u-button @click="updateUser" shape="circle" size="default" :ripple="true" type='warning' class="u-flex-1">
				提交信息</u-button>
		</view>
		<u-toast ref="uToast" :icon='false' />
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				userinfo: {
					// 					nickname: '',
					address: '',
					user_name: '',
					phone: '',
					card: '',
				},
				rules: {
					user_name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						min: 11,
						message: '请输入正确的手机号码',
						trigger: 'change'
					}, ],
					// {
					// 	validator: (rule, value, callback) => {
					// 		return this.$u.test.mobile(value);
					// 	},
					// 	message: '手机号码不正确',
					// 	trigger: ['change', 'blur'],
					// }
					card: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return value.length == 23;
						},
						message: '身份证号不正确',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入住址',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules);
			})
			this.init();
		},
		methods: {
			updateUser() {
				this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				this.$u.api.updateUser({
					username: this.userinfo.user_name,
					address: this.userinfo.address,
					card: this.userinfo.card,
					phone: this.userinfo.phone,
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							title: '信息更新成功',
							type: 'warning',
							position: 'bottom',
							callback: () => {
								this.getUserInfo();
								this.$u.route({
									type: 'back',
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning',
							position: 'bottom',
						})
					}
				})
			},
			init() {
				this.$u.api.getUserInfo({}).then(res => {
					this.userinfo.user_name = res.info.user_name;
					this.userinfo.address = res.info.address;
					this.userinfo.card = res.info.card;
					this.userinfo.phone = res.info.phone;
				})
			},
			getUserInfo() {
				this.$u.api.getUserInfo({}).then(res => {
					this.$u.vuex('vuex_userInfo', res.info);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.viparticle_button {
		position: fixed;
		bottom: 35rpx;
		width: 750rpx;
		height: 98rpx;
	}
</style>
